<!DOCTYPE html>
<html lang="en" ng-app>
	<head>
		<head>
			<meta charset="utf-8">
			<meta http-equiv="X-UA-Compatible" content="IE=edge">
			<meta name="viewport" content="width=device-width, initial-scale=1">
			<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
			<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
			<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
			<script src="//libs.cdnjs.net/angular.js/1.2.16/angular.min.js"></script>
			<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
			<link rel="stylesheet" type="text/css" href="/public/style.css">
		</head>
		<body>
			<div class="container">
				<div ng-controller="siteController">
					<h1>网址导航 <small style="font-size: 12px; color: green">{{target().name + " " + target().href || "小技巧: 搜索框查找到相应的网址，回车直接跳转"}}</small></h1>
					<form action="/" method="get">
						<input class="form-control" placeholder="Search for" id="search" ng-model="search" type="search" autofocus />
						<input type="hidden" name="goto" value="{{target().href}}" />
					</form>
					<hr/>
					<div class="col-md-2 pull-left" ng-repeat="x in sites | filter: search">
						<span class="link">
							<a href="?goto={{x.href}}">{{x.name}}</a>
						</span>
					</div>
					<div style="clear:both"></div>
				</div>
				<div id="footer">
					&copy; author: codeskyblue@gmail.com
				</div>
			</div>
			<script>
				function siteController($scope, $http, filterFilter){
					var that = $scope;
					$http.get("/public/sites.json").success(function(data){
						$scope.sites = data;
					})
					that.search = "";
					that.target = function(){
						console.log(that.search);
						if (that.search.length == 0){
							return {};
						}
						var res = filterFilter(that.sites, that.search); //{tag: that.search});
						return res.length == 0 ? '' : res[0];
					};
				}
				function runScript(event){
					if (e.keyCode == 13) {
					}
				};
			</script>
		</body>
	</html>
